<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input v-model="productName" clearable size="small" placeholder="输入产品名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="primaryToQuery(productName, '', '')" />
        <el-date-picker
          v-model="createTime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-select
          v-model="enabled"
          clearable
          size="small"
          placeholder="状态"
          class="filter-item"
          style="width: 90px"
          @change="primaryToQuery('', '', enabled)"
        >
          <el-option
            v-for="item in enabledTypeOptions"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"
          />
        </el-select>
        <span>
          <el-button v-model="productName" class="filter-item" size="mini" type="success" icon="el-icon-search" @click="primaryToQuery(productName, createTime, '')">搜索</el-button>
          <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="primaryResetQuery">重置</el-button>
        </span>
      </div>
      <div class="crud-opts">
        <span class="crud-opts-left">
          <!--左侧插槽-->
          <slot name="left" />
          <el-button
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-video-play"
            :disabled="publishButtonVisible"
            @click="openPublishDialog"
          >
            发布
          </el-button>
          <el-button
            class="filter-item"
            size="mini"
            type="danger"
            icon="el-icon-video-pause"
            :disabled="stopButtonVisible"
            @click="openStopDialog"
          >
            停止
          </el-button>
          <el-button
            class="filter-item"
            size="mini"
            type="primary"
            :disabled="approvalButtonVisible"
            @click="openApprovalDialog"
          >
            <svg-icon icon-class="edit"/>
            审批详情
          </el-button>
          <slot name="beforeExport" />
          <!--右侧-->
          <slot name="right" />
        </span>
      </div>
    </div>
    <!--发布-->
    <el-dialog
      append-to-body
      :visible.sync="publishDiaVisible"
      title="产品发布"
      :before-close="cancel"
      :fullscreen="true">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="form.code" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-input v-model="form.name" placeholder=""></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--停止-->
    <el-dialog
      append-to-body
      :visible.sync="stopDiaVisible"
      title="产品停止"
      :before-close="cancel"
      width="50%"
    >
      <div slot="footer" class="dialog-footer">
        <el-button @click="stopDiaVisible = false">取 消</el-button>
        <el-button type="primary" @click="stopDiaVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!--查看审批-->
    <el-dialog
      append-to-body
      :visible="approvalDiaVisible"
      title="审批详情"
      :before-close="cancel"
      :fullscreen="true"
    >
    </el-dialog>
    <!--表格渲染-->
    <el-table ref="table" :data="this.tableData" :stripe="true" @selection-change="selectChange">
      <el-table-column type="selection" align="center" />
      <el-table-column label="产品编号" prop="code" align="center" />
      <el-table-column label="产品名称" prop="name" align="center" />
      <el-table-column label="分组" prop="groupName" align="center" />
      <el-table-column label="模型编码" prop="modelCode" align="center" />
      <el-table-column label="模型名称" prop="modelName" align="center" />
      <el-table-column label="目标表名" prop="tableName" align="center" />
      <el-table-column label="所属库" prop="type" align="center" />
      <el-table-column label="表备注" prop="remarks" align="center" />
      <el-table-column label="审批状态">
        <template slot-scope="scope">
          <span>{{setApprovalStatus(scope.row.approvalStatus)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布状态">
        <template slot-scope="scope">
          <span>{{ setStatus(scope.row.publishStatus) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100px">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClicks(scope.row)">详情列表</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--列表查询弹窗-->
    <!--修改弹窗-->
    <!--详情页面-->
  </div>
</template>

<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'Publish',
  data() {
    return {
      // 首页表数据(整体)
      tableData: [{ code: 'p001', name: '绩效/模型1', groupName: '绩效', groupCode: 'kpi', modelName: '模型1', modelCode: 'model1', tableName: 'pdcs_xindai', type: 'PDCS', remarks: '信贷明细表', approvalStatus: 0, publishStatus: 0 },
        { code: 'p002', name: '绩效/模型2', groupName: '绩效', groupCode: 'kpi', modelName: '模型2', modelCode: 'model2', tableName: 'pdcs_licai', type: 'PDCS', remarks: '理财明细表', approvalStatus: 1, publishStatus: 1 },
        { code: 'p003', name: '考核/模型1', groupName: '考核', groupCode: 'examine', modelName: '模型1', modelCode: 'model1', tableName: 'pdcs_xindai', type: 'PDCS', remarks: '基金明细表', approvalStatus: 0, publishStatus: 0 },
        { code: 'p004', name: '考核/模型2', groupName: '考核', groupCode: 'examine', modelName: '模型2', modelCode: 'model2', tableName: 'pdcs_licai', type: 'PDCS', remarks: '保险明细表', approvalStatus: 0, publishStatus: 0 },
        { code: 'p005', name: '收款额/模型3', groupName: '收款额', groupCode: 'charge', modelName: '模型3', modelCode: 'model3', tableName: 'pdcs_baoxian', type: 'PDCS', remarks: '保险明细表', approvalStatus: 0, publishStatus: 0 }],
      // 封装查询的数据
      queryTableData: [],
      // 临时数据(用于页面展示,后期开发删除)
      temporaryTableData: [{ code: 'p001', name: '绩效/模型1', groupName: '绩效', groupCode: 'kpi', modelName: '模型1', modelCode: 'model1', tableName: 'pdcs_xindai', type: 'PDCS', remarks: '信贷明细表', approvalStatus: 0, publishStatus: 0 },
        { code: 'p002', name: '绩效/模型2', groupName: '绩效', groupCode: 'kpi', modelName: '模型2', modelCode: 'model2', tableName: 'pdcs_licai', type: 'PDCS', remarks: '理财明细表', approvalStatus: 1, publishStatus: 1 },
        { code: 'p003', name: '考核/模型1', groupName: '考核', groupCode: 'examine', modelName: '模型1', modelCode: 'model1', tableName: 'pdcs_xindai', type: 'PDCS', remarks: '基金明细表', approvalStatus: 0, publishStatus: 0 },
        { code: 'p004', name: '考核/模型2', groupName: '考核', groupCode: 'examine', modelName: '模型2', modelCode: 'model2', tableName: 'pdcs_licai', type: 'PDCS', remarks: '保险明细表', approvalStatus: 0, publishStatus: 0 },
        { code: 'p005', name: '收款额/模型3', groupName: '收款额', groupCode: 'charge', modelName: '模型3', modelCode: 'model3', tableName: 'pdcs_baoxian', type: 'PDCS', remarks: '保险明细表', approvalStatus: 0, publishStatus: 0 }],
      // 封装查询产品名称
      productName: '',
      createTime: '',
      // 详情信息
      lists: [],
      // 刷新
      refreshDatetime: [{ label: '不刷新', value: 0 }, { label: '2秒', value: 2 }, { label: '5秒', value: 5 },
        { label: '10秒', value: 10 }, { label: '15秒', value: 15 }, { label: '30秒', value: 30 }, { label: '60秒', value: 60 }],
      refreshTime: 0,
      // 发布状态
      enabled: '',
      enabledTypeOptions: [
        { key: '0', display_name: '已发布' },
        { key: '1', display_name: '停止' }
      ],
      // 控制事件
      diaVisible: false,
      publishDiaVisible: false,
      stopDiaVisible: false,
      approvalDiaVisible: false,
      publishButtonVisible: true,
      stopButtonVisible: true,
      approvalButtonVisible: true,
      form: {
        code: '',
        name: ''
      }
    }
  },
  methods: {
    // 选择表格的单个信息
    selectChange(selection) {
      console.log(selection)
      if (selection.length === 1) {
        this.approvalButtonVisible = false
      } else {
        this.approvalButtonVisible = true
      }
      if (selection.length > 0) {
        this.publishButtonVisible = false
        this.stopButtonVisible = false
      } else {
        this.publishButtonVisible = true
        this.stopButtonVisible = true
      }
    },
    // 查看详情
    handleClicks(row) {
      this.diaVisible = true
    },
    // 主页的查询
    primaryToQuery(name, createTime, status) {
      if (!name) {
        return
      }
      this.queryTableData = []
      this.queryTableData.push(this.tableData.find(function(obj) {
        return obj.name === name
      }))
      this.tableData = this.queryTableData
    },
    // 主页重置
    primaryResetQuery() {
      this.tableData = this.temporaryTableData
    },
    // 刷新
    refresh(time) {
      time = parseInt(time)
      console.log(time)
    },
    // 取消
    cancel() {
      this.publishDiaVisible = false
      this.stopDiaVisible = false
      this.approvalDiaVisible = false
    },
    // 打开发布界面
    openPublishDialog() {
      this.publishDiaVisible = true
    },
    // 打开停止
    openStopDialog() {
      this.stopDiaVisible = true
    },
    // 打开审批查询页面
    openApprovalDialog() {
      this.approvalDiaVisible = true
    },
    // 设置发布状态
    setStatus(status) {
      if (status === 0) {
        return '已发布'
      } else {
        return '停止'
      }
    },
    // 设置审批状态
    setApprovalStatus(status) {
      if (status === 0) {
        return '通过'
      } else if (status === 1) {
        return '审批中'
      } else {
        return '拒绝'
      }
    }
  }
}
</script>
<style>
</style>
